<!--角色管理-->
<script setup>
import {defineExpose} from 'vue'
import  useDialog from '@/hooks/use-dialog'
import {validate50WordsRequired, validate20WordsRequired, validate200Words} from '@/utils/form-validate'
import { saveRoleMockApi } from '@/api/mock-js/system/role-api'

defineOptions({
  name: 'DialogRole'
})

const modelValue = defineModel({type: Boolean})

const emit = defineEmits(['on-close'])

const formData = reactive({
  id: undefined,
  roleName: '',
  roleKey: '',
  remarks: ''
})
const {formRef, title, preTitle, loadData, save, saveFlag, close, setInitData, quickSubmit} = useDialog(emit, formData, modelValue)
defineExpose({
  preTitle, title, formData, setInitData
})
const rules = {
  roleName: {required: true, trigger: 'blur', validator: validate20WordsRequired},
  roleKey: {required: true, trigger: 'blur', validator: validate50WordsRequired},
  remarks: {trigger: 'blur', validator: validate200Words},
}

onMounted(() => {
})
</script>
<template>
  <DialogForm
      :model-value="modelValue"
      :title="`${preTitle}角色${title}`"
      :id="formData.id"
      v-model:saveFlag="saveFlag"
      align-center
      width="420px"
      :loading="loadData.loading"
      @on-save="save(saveRoleMockApi,'角色')"
      @on-close="close"
      @on-cancel="close"
  >
    <ElForm ref="formRef" :model="formData" v-loading="loadData.loading" :rules="rules" label-width="80px" size="large"
            @keyup.enter.prevent="e=>quickSubmit(e,()=>save(saveRoleMockApi,'角色'))">
      <ElFormItem label="角色名" prop="roleName">
        <ElInput v-model="formData.roleName" placeholder="请输入角色名"/>
      </ElFormItem>
      <ElFormItem label="角色键值" prop="roleKey">
        <ElInput v-model="formData.roleKey" placeholder="请输入角色键值"/>
      </ElFormItem>
      <ElFormItem label="角色说明" prop="remarks">
        <ElInput type="textarea" rows="1" v-model="formData.remarks"/>
      </ElFormItem>
    </ElForm>
  </DialogForm>
</template>

